<!--
*  功能描述：项目进度统计
 -->
<template>
    <div>
        
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >查询项目进度信息</el-tag
    >
        <el-form :inline="true" :model="server" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="server.ProjectName" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="生产部门">
          <el-select v-model="server.ProjectDeptId" clearable placeholder="生产部门">
            <el-option
              v-for="item in data"
              :key="item.DepId"
              :value="item.DepId"
              :label="item.DepName"
              >{{ item.DepName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
          <el-button type="primary" @click="GrassExcel" style="background-color:red">导出excel</el-button>
        </el-form-item>
      </el-form>
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >项目进度统计</el-tag
    >
    <template>
      <el-table :data="tableData" align="center" style="width: 100%">
          <el-table-column
      prop="ProjectId"
      label="序号">
    </el-table-column>
        <el-table-column
      prop="ProjectName"
      label="项目名称">
    </el-table-column>
        <el-table-column
      prop="DName"
      label="承接部门">
    </el-table-column>
    <el-table-column prop="ProjectStartTime" label="开始时间">
            <span slot-scope="scope">{{
              dateFormat("YYYY-mm-dd", scope.row.ProjectStartTime)
            }}</span>
          </el-table-column>
    <el-table-column prop="ProjectEndTime" label="结束时间">
            <span slot-scope="scope">{{
              dateFormat("YYYY-mm-dd", scope.row.ProjectEndTime)
            }}</span>
          </el-table-column>
        
      </el-table>
      <el-pagination style="text-align: center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[8,15,20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    </template>
    </div>
</template>

<script>
export default{
    data(){
        return{
            data:[],
            tableData:[],
            pageindex:1,
            pagesize:8,
            totalCount: 0,
            server: {
        ProjectName: "",
        ProjectDeptId:"",
      },
        }
    },
    created(){
        this.onsubmit();
        this.GetProgress();
        this.DeptXl();
    },
    methods:{
        onsubmit(){
            this.GetProgress();
        },
        GrassExcel() {
        window.open("Operation/GetGrassExcel")
    },
        handleSizeChange(val) {
        this.pagesize =val;
        this.GetProgress();
      },
      handleCurrentChange(val) {
        this.pageindex=val;
        this.GetProgress();
      },
        GetProgress() {
      this.$http({
        url: "Operation/GetProgress",
        method: "Get",
        params: {
          pageindex: this.pageindex,
          pagesize: this.pagesize,
          ProjectName: this.server.ProjectName,
          ProjectDeptId:this.server.ProjectDeptId,
        },
      }).then(res=>{
          this.tableData=res.data.Data,
          this.totalCount=res.data.totalCount
      });
    },
    //时间转换
    dateFormat(fmt, date) {
      let ret = "";
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
  DeptXl() {
      this.$http({
        url: "Operation/GetDept",
        method: "get",
      }).then((res) => {
        this.data = res.data;
        console.log(this.data);
      });
    },
    }
}
</script>